<template>
  <div class="reading-question">
    <div class="set-font-size-box">
      <span class="title">字体</span>
      <span class="number">{{ articleFontSize }}%</span>
      <div class="slider-font-size">
        <img
          class="click"
          @click="changeFontSize(articleFontSize + 2)"
          src="@/assets/img/add-bg-s.png"
          alt=""
        />
        <el-slider
          :show-tooltip="false"
          v-model="articleFontSize"
          vertical
          height="100px"
        >
        </el-slider>
        <img
          class="click"
          @click="changeFontSize(articleFontSize - 2)"
          src="@/assets/img/sub-bg-s.png"
          alt=""
        />
      </div>
      <!-- <span
          class="add-font"
          @click="changeFontSize(articleFontSize + 1)"
          title="放大字体"
        >
        </span>
        <span
          class="sub-font"
          @click="changeFontSize(articleFontSize - 1)"
          title="缩小字体"
        >
        </span> -->
    </div>
    <!-- ql-snow -->
    <div class="reading-article mr20">
      <!-- $removeHtmlStyle(articleTitle) -->
      <div
        class="scorll-box ql-editor html-style html-content-style"
        :style="`font-size:${12 + articleFontSize / 2}px`"
        v-html="articleTitle"
      ></div>
    </div>
    <div class="reading-question-list">
      <div class="scorll-box">
        <div class="answer-number" v-if="paperData.isAnswer">
          共<span> {{ paperData.questionList.length }} </span> 题, 答对<span>
            {{ trueNum }} </span
          >题, 答错 <span> {{ falseNum }} </span> 题， 未答
          <span> {{ noAnswerNum }} </span>题
        </div>
        <!--  :isHiddenTitle="!!(paperData.type == 5)" -->
        <Question
          v-for="(question, index) in paperData.questionList"
          :key="question.questionId"
          :question="question"
          :isAnswer="paperData.isAnswer"
          :totalIndex="paperData.questionList.length"
          :nowIndex="index + 1"
          :parentId="paperData.id"
          :classify="3"
        ></Question>
      </div>
    </div>
  </div>
</template>
<script>
import Question from "@/components/Question";
export default {
  data() {
    return {
      radio: "",
      showParse: false,
      articleFontSize: 16,
    };
  },
  components: {
    Question,
  },
  computed: {
    trueNum() {
      return this.paperData.questionList.filter((item) => {
        return item.isTrue;
      }).length;
    },
    falseNum() {
      return this.paperData.questionList.filter((item) => {
        return (
          !item.isTrue &&
          item.studentAnswer &&
          item.studentAnswer.length > 0 &&
          item.studentAnswer.some((item) => {
            return item;
          })
        );
      }).length;
    },
    noAnswerNum() {
      return this.paperData.questionList.filter((item) => {
        return (
          !item.isTrue &&
          (!item.studentAnswer ||
            item.studentAnswer.length == 0 ||
            item.studentAnswer.every((item) => {
              return !item;
            }))
        );
      }).length;
    },
    articleTitle() {
      console.log(this.paperData);
      let isTypeBlanks =
        this.paperData.questionList &&
        this.paperData.questionList.some((item) => {
          return item.answerType == 2;
        });
      if (this.paperData.type == 5 || isTypeBlanks) {
        let title = this.paperData.title;
        let index = 1;
        let pos = title.indexOf("_____");
        while (pos !== -1) {
          title = title.replace(
            "_____",
            `<span class="five-underline">__<span class="red_color">${index}</span>__</span>`
          );
          index++;
          pos = title.indexOf("_____");
        }
        return title;
      } else {
        return this.paperData.title;
      }
    },
  },
  methods: {
    changeFontSize(value) {
      if (value <= 100 && value >= 0) {
        this.articleFontSize = value;
      }
    },
  },
  props: {
    paperData: {
      type: Object,
    },
  },
};
</script>